<template>
  <div>
    <a-row :gutter="8" justify="center"  class="history">
      <a-col :span="16">
        <a-card>
          <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="足迹"><TimeLine></TimeLine></a-tab-pane>
            <a-tab-pane key="2" tab="评价" force-render><CommentHistory></CommentHistory></a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
      <a-col :span="8" >
        <a-card hoverable style="width: 400px" class="account">
          <template #cover>
            <img
              alt="example"
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
            />
          </template>
          <template #actions>
            <el-dialog v-model:model-value="create">
              <CreateWords></CreateWords>
            </el-dialog>
            <a-button type="primary" @click="create = true">创建词库</a-button>
            <el-dialog v-model:model-value="my">
              <MyWords></MyWords>
            </el-dialog>
            <a-button type="primary" @click="my = true">查看词库</a-button>
          </template>
          <a-card-meta title="用户名" description="hello,【用户名】">
            <template #avatar>
              <a-avatar src="https://joeschmoe.io/api/v1/random" />
            </template>
          </a-card-meta>
        </a-card>
        <a-card title="我的词库" style="width: 400px">
          <template #extra><a href="#">more</a></template>
            <MyWords v-if="myWords!=null"></MyWords>
          <p v-else>还没有创建词库</p>
        </a-card>
      </a-col>
    </a-row>

  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Breadcrumb from '@/layouts/components/Breadcrumb/index.vue';
  import { SettingOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons-vue';
  import myWords from "@/components/MyWords/index.vue";
  const create = ref(false);
  const my = ref(false);

const activeKey = ref('1');
</script>

<style>
  .history {
    padding-top:50px;
    padding-left: 300px;
    padding-right: 300px;
    background-color: rgb(255, 255, 255);

  }
  .account {
    margin-bottom: 50px;
  }
</style>
